<template>
  <el-scrollbar>
    <el-menu
        class="el-menu-vertical-demo"
        :unique-opened="false"
        router
    >
      <el-menu-item index='/manage/'>管理首页</el-menu-item>
      <el-sub-menu v-for="(menuItem, index) in MenuList" :key="index" :index="index">
        <template #title>{{menuItem.name}}</template>
        <el-menu-item v-for="(val, index) in menuItem.children" :index="val.url" :key="index">
          {{val.name}}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import {ref, onMounted, reactive, toRefs} from 'vue'
import {getEleMenuJson} from '@/api/menu'

export default ({
  name: 'menuTree',
  setup() {
    const active1 = ref("1")
    const state = reactive({
      MenuList: []
    })
    // 调取api获取数据
    const getMenuList = () => {
      getEleMenuJson().then(res => {
        console.log("===============");
        state.MenuList = res.data.children
      })
    }
    onMounted(getMenuList)
    // ...toRefs()将state里面得对象解构
    return {
      ...toRefs(state),
      active1
    };
  }
})

</script>

<style lang="scss" scoped>
.el-scrollbar {
  --el-scrollbar-bg-color: #fff;
}

.el-menu {
  --el-menu-bg-color: #20283d;
  --el-menu-hover-bg-color: var(--el-color-primary);
  --el-menu-active-color: #fff;
  --el-menu-text-color: #ffffff;
  border-right: none;

  .el-link {
    color: #fff;
    width: 100%;
    justify-content: flex-start;
  }
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary);
}
</style>
